<template>
  <div class="app-container">
    <div class="inputBox">
      <el-input v-model="search.orderNum" class="input" placeholder="请输入单号查询" width="95"/>
      <el-input v-model="search.title" class="input" placeholder="请输入课程标题查询" />
      <el-input v-model="search.name" class="input" placeholder="请输入报名人查询" />
      <el-input v-model="search.phone" class="input" placeholder="请输入报名人手机号查询" />
      <el-date-picker v-model="search.startTime" class="input" type="date" placeholder="请输入报名开始时间查询" />
      <el-date-picker v-model="search.endTime" class="input" type="date" placeholder="请输入报名结束时间查询" />
      <el-input v-model="search.nickName" class="input" placeholder="请输入推广人查询" />
      <el-button type="primary" @click="toSearch()">查询</el-button>
      <el-button type="primary" @click="reset()">重置</el-button>
    </div>
    <TableView
      ref="table"
      :isloading="listLoading"
      :data="list"
      :permission-data="permissionList"
      :permission-show="permissionShow"
      @submit="onSubmit"
    />
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="fetchData" />
    <detail :detialvisible.sync="dialogTableVisible" :dialogdata.sync="list" :myindex.sync="detailIndex" :detail-mode="'singup'" />
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import { Message } from 'element-ui'
import { getSignUpList } from '@/api/signup'
import detail from '@/components/detail'
import TableView from '@/components/TableView'
import { getLocalUid, setLocalUid, getLocalId, setLocalId } from '@/utils/uid'
import { getPermission } from '@/api/permission'

export default {
  components: { Pagination, detail, TableView },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      courseTitle: '新增课程',
      list: [],
      total: 0,
      listLoading: true,
      listQuery: {
        pageNum: 1,
        pageSize: 10
      },
      search: {
        orderNum: '',
        title: '',
        name: '',
        phone: '',
        startTime: '',
        endTime: '',
        nickName: ''
      },
      dialogFormVisible: false,
      courseTypeOptions: [
        {
          id: 0,
          name: '录播回放课'
        },
        {
          id: 1,
          name: '直播课程'
        }
      ],
      course: {
        courseName: '',
        title: '',
        sign: '',
        introduce: '',
        address: '',
        imgUrl: '',
        courseType: '',
        teacher: '',
        courseTime: '',
        startTime: '',
        endTime: ''
      },
      dialogTableVisible: false,
      detailList: [],
      formLabelWidth: '120px',
      detailIndex: -1,
      permissionShow: false, // 权限数据未到达之前按钮隐藏
      permissionList: [] // 权限数据列表
    }
  },
  watch: {
    'permissionList'(newVal) {
      this.permissionList = newVal
      this.permissionShow = true
    }
  },
  created() {
    this.getPermissonFn()
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    // 权限数据的获取
    getPermissonFn() {
      const id = getLocalId()
      const uid = getLocalUid()
      const data = { uid }
      getPermission(id, data).then(res => {
        console.log('权限结果', res)
        if (res.code === '200') {
          this.permissionList = res.data
          // console.log('权限名称：', this.getPermissionName(this.permissionList))
        } else {
          Message.error(res.message + '-' + res.data)
        }
      })
    },
    // 查询
    toSearch() {
      if (!this.search.startTime) this.search.startTime = ''
      if (!this.search.endTime) this.search.endTime = ''
      this.search.startTime = new Date(this.search.startTime).getTime();
      this.search.endTime = new Date(this.search.endTime).getTime();
      this.listLoading = true
      const newData = this.objectCon(this.listQuery, this.search)
      getSignUpList(newData).then(response => {
        this.request(response)
      })
    },
    // 重置
    reset() {
      this.search.orderNum = ''
      this.search.title = ''
      this.search.name = ''
      this.search.phone = ''
      this.search.startTime = ''
      this.search.endTime = ''
      this.search.nickName = ''
      this.search.pageNum = 0
      this.search.pageSize = 10
    },
    onSubmit(index, type) {
      // console.log(type)
      switch (type) {
        case 'add':
          // 新增
          break;
        case 'del':
          break;
        case 'see':
          this.detailIndex = index
          this.dialogTableVisible = true
          break;
        case 'remarks':
          break;
        case 'enable':
          break;
        case 'disable':
          break;
      }
    },
    fetchData() {
      const newData = this.objectCon(this.listQuery, this.search)
      this.listLoading = true
      getSignUpList(newData).then(response => {
        this.request(response)
      })
    },
    request(response) {
      if (response.code === '200') {
        // console.log(response)
        this.list = response.data.list
        this.total = response.data.total
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      } else {
        this.listLoading = false
      }
    },
    del(pid) {
      this.$confirm('确认要删除该咨询？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
      }).catch(() => {
      })
    },
    look(pid) {
      this.$router.push({
        path: '/detail',
        query: {
          id: pid
        }
      })
    },
    edit(pid, index) {
      this.$data.dialogFormVisible = true
      this.$data.courseTitle = '编辑课程'
      this.$data.course = this.$data.list[index]
    },
    getValue(value) {
      this.$data.course.status = value
    }
  }
}
</script>
<style lang="scss" scoped>
  .inputBox {
    div{
      margin:0 10px 10px 0;
    }
    div:nth-of-type(1) { width: 140px; }
    div:nth-of-type(2) { width: 170px; }
    div:nth-of-type(3) { width: 160px; }
    div:nth-of-type(4) { width: 190px; }
    div:nth-of-type(5) { width: 190px; }
    div:nth-of-type(6) { width: 190px; }
    div:nth-of-type(7) { width: 160px; }
  }
</style>
